<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>base64</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
    body {
        padding: 20px;
    }
    .pic {
        background: url('') no-repeat 50% 50%;
        background-size: 64px 64px;
        width: 93px;
        height: 93px;
        float: left;
        position: relative;
        border: 1px solid #ccc;
    }

    .pic input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        width: 93px;
        height: 93px;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        float: left;
        cursor: pointer;
        border: 1px solid #ccc;
        padding: 0 5px;
    }

    .pic img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        height: 93px;
        width: 93px;
    }

    .pic .close {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 30px;
        height: 30px;
        z-index: 5;
        background: url('') 50% 50% no-repeat;
        background-size: 30px 30px;
    }
    </style>
</head>

<body>
    <form id="opinionFrom" action="submit.aspx" class="opinionf" method="post" enctype="multipart/form-data">
        <div id="box">
            <div class="pic">
                <input type="file" name="file" accept="image/*" contenteditable="false" />
            </div>
        </div>
    </form>
    <script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
    <script>
    function showImg(file, ele) {
        var img = $("<img>"),
            close = $("<div>", {
                "class": "close"
            });
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                ele.find(":not(input)").remove();
                img.attr("src", evt.target.result.replace('data:base64', 'data:image/jpeg;base64')).appendTo(ele);
                close.on("click", function() {
                    img.remove();
                    close.remove();
                    file.value = "";
                    file.files.length = 0;
                }).appendTo(ele);
            }
            reader.readAsDataURL(file.files[0]);
        } else if (ele[0].filters) {
            ele.find(":not(input)").remove();
            img = $("<div>", {
                "style": "height: 93px; width: 93px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"
            });
            img.appendTo(ele);
            $(file).select();
            $(file).blur();
            //
            var imgSrc = document.selection.createRange().text;
            img[0].filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            //img[0].filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            close.on("click", function() {
                img.remove();
                close.remove();
                file.value = "";
                //file.files.length = 0;
            }).appendTo(ele);
        }
    }


    $(function() {
        $('#box').on('change', '.pic>input[type=file]', function() {
            showImg(this, $(this).parent());
        });
    });
    </script>
</body>

</html>
